/*
 * @Author: dingyuwen ding_yuwen@163.com
 * @Date: 2023-05-23 15:12:30
 * @LastEditTime: 2023-11-10 14:03:53
 * @LastEditors: DingYuwen 43669762+DingYuwen@users.noreply.github.com
 * @Description:
 */
import { Text, Flex, Heading, Image } from '@chakra-ui/react';
import { useFullscreen } from 'ahooks';
import { PropsWithChildren, useRef } from 'react';
import Logo from 'assets/images/tourfly.png';
export default function AppBackground({
  children,
  withBanner,
}: PropsWithChildren<{ withBanner?: boolean }>) {
  const ref = useRef(null);
  const [_, { toggleFullscreen }] = useFullscreen(ref);
  return (
    <Flex flexDir="column" minH="100vh" ref={ref} bg="white">
      {withBanner && (
        <Flex onDoubleClick={toggleFullscreen} p="4" shadow="sm">
          <Flex gap="4" alignItems="end">
            {/* <Heading
              bgGradient="linear(to-l, #7928CA, #FF0080)"
              bgClip="text"
              fontSize="5xl"
              fontWeight="extrabold"
            >
              美度
            </Heading> */}
            <Image src={Logo} w="204px" h="10" />
            <Text
              fontStyle="italic"
              bgClip="text"
              bgGradient="linear(to-r, #202020 20%, #ff6f79 50%)"
            >
              Powered by GRAPHCORE
            </Text>
          </Flex>
        </Flex>
      )}
      {children}
    </Flex>
  );
}
